import { useEffect, useState } from "react"

//useEffect:关键点，依赖项改变后，会先cleanup之前的
//在每次依赖项变更重新渲染后，React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值运行 setup 函数。
//依赖对象，只要引用不变，就不会触发
//线绘制，再effect

//尽量 将每个 Effect 作为一个独立的过程编写，并且 每次只考虑一个单独的 setup/cleanup 周期。组件是否正在挂载、更新或卸载并不重要。
// 由 setInterval() 和 clearInterval() 管理的定时器。
// 使用 window.addEventListener() 和 window.removeEventListener() 的事件订阅。
// 一个第三方的动画库，它有一个类似 animation.start() 和 animation.reset() 的 API。
//还有弹框
const ComponentB = ()=> {
  const [count,setCount] = useState(3)
  const [other,setOther] = useState(5)
  const [obj,setObj] = useState({})
  useEffect(()=>{
    console.log('add')
    return () => {console.log('remove')}
  },[count])

  useEffect(()=>{
    console.log('add')
    return () => {console.log('remove')}
  },[obj])
  return (
    <div>Effect{count}
      <div onClick={()=>setCount(count+1)}>add</div>
      <div onClick={()=>setObj(obj=> {
        obj.a = 3 ;
        return obj
        })}>add2</div>
    </div>
  )
}
export default ComponentB